<!-- 系统设置 -->
<template>
    <view class="sustem-setting">
        <van-nav-bar title="标题" left-text="返回" right-text="忘记密码" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />
        <view class="van-field-box">
            <van-field v-model="state.oldPassword" :type="state.isShow.one.type" placeholder="老密码" /><span
                @click="passwordFn('one')"><img src="@/assets/image/icon126.png" v-if="state.isShow.one.show" /><img
                    src="@/assets/image/icon127.png" v-else /></span>
        </view>
        <view class="van-field-box">
            <van-field v-model="state.newPassword1" :type="state.isShow.two.type" placeholder="新密码" /><span
                @click="passwordFn('two')"><img src="@/assets/image/icon126.png" v-if="state.isShow.two.show" /><img
                    src="@/assets/image/icon127.png" v-else /></span>
        </view>
        <view class="van-field-box">
            <van-field v-model="state.newPassword2" :type="state.isShow.three.type" placeholder="新密码" /><span
                @click="passwordFn('three')"><img src="@/assets/image/icon126.png" v-if="state.isShow.three.show" /><img
                    src="@/assets/image/icon127.png" v-else /></span>
        </view>
        <view class="tips">请输入至少由6位数字、字母和字符组成的密码</view>
        <van-button type="primary" @click="confirmUpdate()" :loading="state.isLoading">确认修改</van-button>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import { onLoad } from '@dcloudio/uni-app'

import {
    UpdatePWD
} from "@/api/person/index.js"

let { proxy } = getCurrentInstance()

const state = reactive({
    show: false,
    curIndex: false,
    isEdit: false,
    username: '',
    isShow: {
        "one": {
            type: 'password',
            show: true,
        },
        "two": {
            type: 'password',
            show: true,
        },
        "three": {
            type: 'password',
            show: true,
        }
    },
    newPassword1: '',
    newPassword2: '',
    oldPassword: "",
    isLoading: false
})

onLoad((options) => {

})


const onClickLeft = () => history.back();

const onClickRight = () => {
    uni.navigateTo({
        url: "/pages/login/retrievePassword/index"
    })
}

const passwordFn = (item) => {
    state.isShow[item].show = !state.isShow[item].show
    state.isShow[item].type = state.isShow[item].show ? 'password' : 'text'
}

const UpdatePWDFn = async () => {
    let params = {
        newPassword: state.newPassword2,
        oldPassword: state.oldPassword,
    }
    try {
        state.isLoading = true
        let data = await proxy.$put(UpdatePWD(), params)
        state.isLoading = false
    } catch (error) {
        state.isLoading = false
        uni.showToast({
            title: error.message,
            icon: 'none',
            duration: 2000
        })
    }
}

// 确认修改
const confirmUpdate = () => {
    let { oldPassword, newPassword1, newPassword2 } = state
    if (oldPassword == "") {
        uni.showToast({
            title: '请输入旧密码',
            icon: 'none',
            duration: 2000
        })
        return
    }
    if (newPassword1 == "" || newPassword2 == "") {
        uni.showToast({
            title: '请输入新密码',
            icon: 'none',
            duration: 2000
        })
        return
    }
    if (newPassword1 != newPassword2) {
        uni.showToast({
            title: '两次密码不一致',
            icon: 'none',
            duration: 2000
        })
        return
    }
    if (newPassword2.length < 6) {
        uni.showToast({
            title: '密码长度不得小于6位',
            icon: 'none',
            duration: 2000
        })
        return
    }
    UpdatePWDFn()
}

</script>
    
<style lang="scss" scoped>
.van-field {
    width: calc(100% - 60rpx);
    margin: 30rpx;
    background: #F7F8F9;
}

.van-button {
    height: 100rpx;
    width: calc(100% - 60rpx);
    line-height: 100rpx;
    margin-left: 30rpx;
    font-size: 36rpx;
    position: fixed;
    bottom: 30rpx;
}

.van-field-box {
    width: calc(100% - 60rpx);
    position: relative;

    .van-field {
        width: 100%;
    }

    img {
        width: 32rpx;
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 66;
        transform: translateY(-50%);
    }
}

.tips {
    font-size: 20rpx;
    font-weight: 500;
    color: #999999;
    margin: 30rpx;
}
</style>
    